<!DOCTYPE html>
<html>
  <head>
    <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
    <script>
      if (window.testRunner)
        testRunner.dumpAsText();

      function repaintTest()
      {
        var things = document.getElementsByClassName("before");
        while (things.length)
          things[0].classList.remove("before");
      }
    </script>
    <style>
      .box {
        width: 200px;
        height: 200px;
        margin: 20px;
        background-color: green;
        -webkit-filter: url(#merge);
        filter: url(#merge);
      }
      .before {
        background-color: red;
      }
    </style>
  </head>
  <body onload="runRepaintTest()">
    <div class="before box"></div>
    <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
      <defs>
        <filter id="merge">
          <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.3 0"  result="trans"/>
          <feOffset dx="40" dy="40"   in="trans" result="offset1"/>
          <feOffset dx="80" dy="80"   in="trans" result="offset2"/>
          <feOffset dx="120" dy="120" in="trans" result="offset3"/>
          <feMerge>
            <feMergeNode in="trans"/>
            <feMergeNode in="offset1"/>
            <feMergeNode in="offset2"/>
            <feMergeNode in="offset3"/>
          </feMerge>
        </filter>
      </defs>
    </svg>
  </body>
</html>
